<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 复杂数据类型
    // console.log({} == {}); // false

    // let用于创建变量 和 const用于创建常量
    // const obj = {
    //   a: 3
    // };
    // obj.b = 4;
    // obj.a = 30;

    // let obj2 = {
    //   name: "zhangsan"
    // }
    // obj2 = {
    //   name: "lisi"
    // }






    // 深浅拷贝(面试常见题)
    // const obj1 = {
    //   name: "zhangsan",
    //   age: 20,
    // };
    // =号表示赋值
    // 对于对象来说，赋值的是地址
    // const obj2 = obj1;
    // obj2.age = 30;
    // console.log(obj2);
    // console.log(obj1);


    // 希望得到一个obj2，obj2一开始的值要和obj1一样。但是改动其中的一个的时候，另一个要保持不变


    // 对象的浅拷贝
    // 1. Object.assign()方法用于对象的合并
    // const obj2 = Object.assign({}, obj1);

    // 2. ...是es6新增的展开运算符
    // const obj2 = {...obj1};
    // obj2.age = 30;
    // console.log(obj1);
    // console.log(obj2);



    // 对象的深拷贝
    const deepObj1 = {
      name: "xiaoxue",
      age: 20,
      likes: {
        "1": "sing",
        "2": "dance",
      },
      fn: function() {},
      udf: undefined,
    };
    // const deepObj2 = {...deepObj1};

    // 浅拷贝只能拷贝其中的一层，如果出现多层，需要用到深拷贝
    // 1. 使用递归的浅拷贝,但是非常麻烦


    // 2. 使用JSON的方式
    // const json = {
    //   age: 20,
    //   likes: ["sing", "dance", "rap", "basketball"]
    // }
    // JSON.stringify将json转成json字符串
    // console.log(JSON.stringify(json));
    // JSON.parse将json字符串转成json
    // console.log(JSON.parse(JSON.stringify(json)));

    // const deepObj2 = JSON.parse(JSON.stringify(deepObj1));
    // deepObj2.likes["1"] = "rap";
    // console.log(deepObj1);
    // console.log(deepObj2);

    // 使用JSON的方式得到的新对象会过滤函数和undefined
    // 至少可以满足工作中绝大部分的情况
    // console.log(deepObj2);


    // 3. 使用第三方库lodash
    // 里面的_.cloneDeep()可以完美做到深拷贝
    // 不好用，引入的话会导致代码体积过大
    

    // 4. 借助人工智能
    // function deepCopy(obj) {
    //   // 处理null和undefined
    //   if (obj === null || typeof obj !== 'object') {
    //     return obj;
    //   }

    //   // 处理数组
    //   if (Array.isArray(obj)) {
    //     const copy = [];
    //     for (let i = 0; i < obj.length; i++) {
    //       copy[i] = deepCopy(obj[i]);
    //     }
    //     return copy;
    //   }

    //   // 处理对象
    //   const copy = {};
    //   for (const key in obj) {
    //     if (obj.hasOwnProperty(key)) {
    //       copy[key] = deepCopy(obj[key]);
    //     }
    //   }
    //   return copy;
    // }





    // 数组的深浅拷贝
    const arr = [1,2,3,4,5];
    // 数组合并用concat
    const arr2 = [].concat(arr);
    // 也可以用展开运算符
    const arr3 = [...arr];
    // 深拷贝
    const arr4 = JSON.parse(JSON.stringify(arr));

    
  </script>
</body>
</html>